<template>
    <div class="parent">
        <div class="navList">
            <div class="listItem" @click="openList('region')" :class="[this.isActive('region')]">
                <text class="text" :class="[this.textActive('region')]">行政区划</text>
                <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}"  :class="[this.isOpenKey == 'region'?'open':'']">{{'\ue60b'}}</text>
            </div>
            <div class="listItem" @click="openList('tabCont')" :class="[this.isActive('tabCont')]">
                <text class="text" :class="[this.textActive('tabCont')]">报表内容</text>
                <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}"  :class="[this.isOpen('tabCont')]">{{'\ue60b'}}</text>
            </div>
        </div>
        <listCont @selectItem="selectItem"></listCont>
        <listCont :is="currentTab" @closeList="closeContent" :datalist="datalist"></listCont>
    </div>
</template>
<script>
import bottomListCont from '../views/living/bottomListCont'
import roadListCont from '../views/living/roadListCont'
import toiletsListCont from '../views/living/toiletsListCont'
import latrineListCont from '../views/living/latrineListCont'
import sewageListCont from '../views/living/sewageListCont'
import garbageListCont from '../views/living/garbageListCont'
import solarListCont from '../views/living/solarListCont'
import savelightListCont from '../views/living/savelightListCont'
import farmhouseListCont from '../views/living/farmhouseListCont'
import region from '../components/region'
import time from '../components/time'
import tabCont from '../components/bottomTabcont'
import { addIconFontSupport } from '../config/iconConfig.js'
import { getCache } from '../util/storageUtils';
import { CTCE_USER_INFO } from '../config/storageTypes';
import event from '../net/event'
const eventBus = weex.requireModule('bmEvents')
const dom = weex.requireModule('dom')
const modal = weex.requireModule('modal')
export default {
    name: 'month',
    data () {
        return {
            pIndexKey:'',
            isOpenKey: '',
            textActiveKey: '',
            currentTab: 'bottomListCont',
            xzqhdm: '',
            datalist: []
            // gridData: [],
            // gridHead: [
            //     { name: 'XZQHMC', value: '区(镇村)'},
            //     { name: 'CJCSL', value: '2018年创建村总数(个)'},
            //     { name: 'CZCWMJ', value: '村庄拆违(平方米)'},
            //     { name: 'XZLHMJ', value: '新增村庄绿化面积(平米)'},
            //     { name: 'XSLQLMJ', value: '需修缮面积(沥青路面,平米)'},
            //     { name: 'XJLQMJ', value: '需新建面积(沥青路面,平米)'},
            //     { name: 'XSSNLMJ', value: '需修缮面积(水泥路面,平米)'},
            //     { name: 'XJSNLMJ', value: '需新建路面积(水泥路面,平米)'},
            //     { name: 'XSGCSL', value: '需修缮公厕总数(个)'},
            //     { name: 'XJYLGC', value: '需新建一类公厕数(个)'},
            //     { name: 'XJELGC', value: '需新建二类公厕数(个)'},
            //     { name: 'XJSLGC', value: '需新建三类公厕数(个)'},
            //     { name: 'XJHCSL', value: '需修缮户厕数量(个)'},
            //     { name: 'XJWSZ', value: '需新建污水处理站(个)'},
            //     { name: 'XJWSGW', value: '污水供水管网长度(千米)'},
            //     { name: 'WJTF', value: '挖掘土方(立方米)'},
            //     { name: 'GZLJT', value: '需购置垃圾桶数(个)'},
            //     { name: 'GZLJX', value: '需购置垃圾箱数(个)'},
            //     { name: 'XSYS', value: '需修缮太阳能浴室数量(个)'},
            //     { name: 'XJYS', value: '需新建太阳能浴室数量(个)'},
            //     { name: 'XSLD', value: '需新建修缮路灯数量(盏)'},
            //     { name: 'KZJNGZ', value: '整村农宅抗震节能改造(户)'}
            // ]
        }
    },
    components: {
        bottomListCont,
        roadListCont,
        toiletsListCont,
        latrineListCont,
        sewageListCont,
        garbageListCont,
        solarListCont,
        savelightListCont,
        farmhouseListCont,
        region,
        time,
        tabCont
    },
    beforeCreate () {
        this.$notice.loading.show()
        addIconFontSupport(dom, "../")
    },
    created () {
        this.$navigator.setNavigationInfo({
            title: '基础设施建设需求摸底汇总表',
            navShow: true,
            statusBarStyle: 'LightContent'
        })
        getCache(CTCE_USER_INFO).then(res => {
            const data = JSON.parse(res)
            event.getTJ11(data.xzqhdm).then(val => {
                this.datalist= val.datalist
                this.currentTab = bottomListCont
                this.$nextTick(() => {
                    this.$notice.loading.hide()
                })
            })
        })
        eventBus.on('xzqhEvent', (param) => {
            if (param) {
                this.xzqhdm = param
                event.getTJ11(param).then(val => {
                    this.datalist = val.datalist
                    this.currentTab = bottomListCont
                    this.$nextTick(() => {
                        this.$notice.loading.hide()
                    })
                })
            } else {
                getCache(CTCE_USER_INFO).then(res => {
                    const data = JSON.parse(res)
                    this.xzqhdm = data.xzqhdm
                    event.getTJ9(data.xzqhdm).then(val => {
                        this.datalist = val.datalist
                        this.currentTab = bottomListCont
                        this.$nextTick(() => {
                            this.$notice.loading.hide()
                        })
                    })
                })
            }
        })
        eventBus.on('bottomTab', (param) => {
            switch(param) {
                case 0: 
                    this.currentTab = bottomListCont
                break;
                case 1: 
                    this.currentTab = roadListCont
                break;
                case 2: 
                    this.currentTab = toiletsListCont // 公厕
                break;
                case 3:
                    this.currentTab = latrineListCont // 农厕
                break;
                case 4: 
                    this.currentTab = sewageListCont // 污水处理
                break;
                case 5: 
                    this.currentTab = garbageListCont // 垃圾处理
                break;
                case 6: 
                    this.currentTab = solarListCont // 太阳能浴室
                break;
                case 7: 
                    this.currentTab = savelightListCont // 节能灯
                break;
                case 8: 
                    this.currentTab = farmhouseListCont // 抗震改造
                break;
            }
        })
    },
    methods: {
        isActive (_c) {
            return this.pIndexKey === _c ?'openColor':''
        },
        isOpen (index) {
            return this.isOpenKey === index ?'open':''
        },
        textActive (ind) {
            return this.textActiveKey === ind ? 'textColor' : ''
        },
        openList (_key) {
            if(this.pIndexKey === _key || this.isOpenKey === _key || this.textActiveKey === _key) {
                this.pIndexKey = '';
                this.isOpenKey = '';
                this.textActiveKey = '';
                this.currentTab = '';
            } else {
                this.pIndexKey = _key;
                this.isOpenKey = _key;
                this.textActiveKey = _key;
                this.currentTab = _key;
            }
        },
        closeContent () {
            this.pIndexKey = ''
            this.isOpenKey = ''
            this.currentTab = ''
            this.textActiveKey = ''
        },
    }
}
</script>
<style scoped>
.parent{
    width: 750px;
    flex: 1;
    background-color: #eee;
}
.navList{
  width: 750px;
  height: 96px;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border-bottom-color: #eee;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  background-color: white;
}
.listItem{
  width: 375px;
  height: 96px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.special{
  border-right-width: 0;
}
.text{
  font-size:28px;
  font-family:NotoSansHans-Regular;
  color:rgba(151,151,151,1);
}
.bar-ic{
  font-size: 20px;
  color: rgba(151,151,151,1);
  padding-right: 10px;
}
.open{
  transform: rotate(180deg);
  color: rgba(255,255,255,1);
}
.openColor{
  width: 250px;
  height: 60px;
  background-color: rgba(35,196,160,1);
  color: rgba(255,255,255,1);
}
.textColor{
    color: rgba(255, 255, 255, 1);
}
</style>
